<template>
  <el-row>
    <el-col :span="patientListIfSpan">
      <div style="padding: 20px;">
        <el-row>
          <el-input clearable placeholder="患者名称" style="width: 200px;margin-right: 10px" v-model="patientName"/>
          <el-button @click="getPatientList" class="el-icon-search" type="primary"/>
        </el-row>
        <el-row style="padding: 10px 0">
          <el-tabs @tab-click="handleClick" type="card">
            <el-tab-pane label="未发药" name="noMedicine"></el-tab-pane>
            <el-tab-pane label="已发药" name="dispensed"></el-tab-pane>
          </el-tabs>
        </el-row>
        <el-table :data="patientList" @row-click="patientClick" width="300px">
          <el-table-column label="ID" prop="id" v-if="false"/>
          <el-table-column align="center" label="病历号" prop="medicalRecordNo"/>
          <el-table-column align="center" label="名字" prop="name"/>
        </el-table>
      </div>
    </el-col>
    <el-col :span="drugDataIfSpan">
      <div style="padding-top: 30px;padding-right: 20px;padding-left: 20px">
        <el-form :inline="true" :rules="patient" ref="patient">
          <el-form-item>
            <el-button @click="showOrHidden" type="primary">
              <span :class=" elIfShow ? 'el-icon-caret-left'  : 'el-icon-caret-right'"></span>
            </el-button>
          </el-form-item>
          <el-form-item label="ID" prop="patientId" v-if="false">
            <el-input :disabled="true" v-model="patient.id"/>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input :disabled="true" v-model="patient.name"/>
          </el-form-item>
          <el-form-item label="就诊号" prop="medicalRecordNo">
            <el-input :disabled="true" v-model="patient.medicalRecordNo"/>
          </el-form-item>
          <el-form-item class="top-right-btn" v-show="noMedicineButton">
            <el-button @click="handleMedicine" class="el-icon-document-checked" plain type="success">发药</el-button>
          </el-form-item>
          <el-form-item class="top-right-btn" v-show="dispensedButton">
            <el-button @click="handleWithdrawal" class="el-icon-folder-delete" plain type="danger">退药</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="drugData" :span-method="objectSpanMethod" @selection-change="handleSelectionChange" border
                  style="width: 100%; margin: 10px 10px">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column align="center" label="处方号" prop="mprId"/>
          <el-table-column align="center" label="处方名" prop="mprName"/>
          <el-table-column align="center" label="药品名" prop="drugName"/>
          <el-table-column align="center" label="药品数量" prop="num"/>
          <el-table-column align="center" label="单价" prop="price"/>
          <el-table-column align="center" label="开立医生" prop="userName"/>
          <el-table-column :formatter="recordTypeFormat" align="center" label="频次" prop="frequency"/>
          <el-table-column align="center" label="使用建议" prop="medicalAdvice"/>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-tag :type='onColourLine[scope.row.status]'>{{onLine[scope.row.status]}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script>

  import {medicinePatientList} from "@/api/pms/patient";
  import {herbalistPharmacy_drug} from "@/api/dms/pharmacy_drug";
  import {updateHerbal_prescription_records} from "@/api/dms/herbal_prescription_record";

  export default {
    name: "Medicine_prescription_record",
    data() {
      return {
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        /**发药状态*/
        status: 2,
        // 显示与隐藏
        elIfShow: false,
        // 药品列表跨列数
        drugDataIfSpan: 24,
        // 患者列表跨列数
        patientListIfSpan: 0,
        /**患者名*/
        patientName: null,
        /**测试数据*/
        patientTestList: [{id: '1', medicalRecordNo: 148648952894894, name: "张三",}, {
          id: '2',
          medicalRecordNo: 98568919852416,
          name: "李四"
        }],
        /**患者列表*/
        patientList: [],
        /**当前患者信息*/
        patient: {id: null, name: null, medicalRecordNo: null},
        // 状态的对应的值
        onLine: {"2": "未发药", "3": "已发药"},
        // 状态的对应的颜色
        onColourLine: {"2": "primary", "3": "warning"},
        //药品使用频次字典
        frequencyOptions: [],
        //药品列表
        drugData: [],
        //发药退药按钮显隐
        noMedicineButton: true,
        dispensedButton: false,
        /**测试数据*/
        tableData: [{
          mprId: '1',
          mprName: '王小虎',
          drugName: '234',
          num: 1,
          price: 12.3,
          userName: 'zhangsan',
          frequency: 1,
          medicalAdvice: '多喝开水',
          status: 2
        }, {
          mprId: '1',
          mprName: '王小虎',
          drugName: '165',
          num: 2,
          price: 12.3,
          userName: 'zhangsan',
          frequency: 2,
          medicalAdvice: '多喝开水',
          status: 2
        }, {
          mprId: '2',
          mprName: '王小虎',
          drugName: '324',
          num: 1,
          price: 12.3,
          userName: 'zhangsan',
          frequency: 2,
          medicalAdvice: '多喝开水',
          status: 3
        }, {
          mprId: '2',
          mprName: '王小虎',
          drugName: '621',
          num: 2,
          price: 12.3,
          userName: 'zhangsan',
          frequency: 1,
          medicalAdvice: '多喝开水',
          status: 3
        }, {
          mprId: '2',
          mprName: '王小虎',
          drugName: '539',
          num: 1,
          price: 12.3,
          userName: 'zhangsan',
          frequency: 1,
          medicalAdvice: '多喝开水',
          status: 3
        }],
      }
    },
    created() {
      this.getDicts("drug_use_frequency").then(response => {
        this.frequencyOptions = response.data;
      });
    },
    methods: {
      /**获取患者列表*/
      getPatientList() {
        medicinePatientList({"medicineStatus": this.status, "patientName": this.patientName}).then(response => {
          //this.patientList = response.data;
          if (response.data.length > 0) {
            this.patientList = response.data;
          } else {
            this.patientList = this.patientTestList;
          }
          this.drugData = null;
        });
      },
      //控制模板显示与隐藏
      showOrHidden() {
        this.elIfShow = !this.elIfShow;
        if (this.elIfShow) {
          this.drugDataIfSpan = 16;
          this.patientListIfSpan = 8;
        } else {
          this.drugDataIfSpan = 24;
          this.patientListIfSpan = 0;
        }
      },
      /**tab点击事件*/
      handleClick(tab, event) {
        if (tab.name === 'noMedicine') {
          this.noMedicine();
          this.noMedicineButton = true;
          this.dispensedButton = false
        } else {
          this.dispensed();
          this.noMedicineButton = false;
          this.dispensedButton = true
        }
      },
      /**获取未发药患者列表*/
      noMedicine() {
        this.status = 2;
        this.getPatientList();
      },
      /**获取已发药患者列表*/
      dispensed() {
        this.status = 3;
        this.getPatientList();
      },
      /**点击患者*/
      patientClick(row, event, column) {
        this.patient = row;
        this.handleDrugList();
      },
      // 药品使用频次字典翻译
      recordTypeFormat(row, column) {
        return this.selectDictLabel(this.frequencyOptions, row.frequency);
      },
      /**获取处方药品信息并处理数据*/
      handleDrugList() {
        //获取数据
        herbalistPharmacy_drug({"registrationId": this.patient.medicalRecordNo, "status": this.status}).then(value => {
          //this.drugData=value.data;
          if (value.data.length > 0) {
            this.drugData = value.data;
          } else {
            this.drugData = this.tableData;
          }
          //处理数据
          for (let i = this.drugData.length - 1; i > 0; i--) {
            //从后向前遍历
            if (!this.drugData[i].rowspan) {
              //设置初始值(可理解为：每个数据项必定占一行)
              this.drugData[i].rowspan = 1;
            }
            if (this.drugData[i].mprId === this.drugData[i - 1].mprId) {
              //当前处方id与前一个数据的处方id相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
              this.drugData[i - 1].rowspan = this.drugData[i].rowspan + 1;
              this.drugData[i].rowspan = 1;
            }
          }
        });
      },
      /**
       * 通过给table传入span-method方法可以实现合并行或列，
       * 方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
       * 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
       * */
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
          if (row.rowspan !== 1) {
            return {
              rowspan: row.rowspan,
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.mprId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length
      },
      /** 发药按钮操作 */
      handleMedicine() {
        if (this.ids.length > 0) {
          if (confirm('是否确认发药?')) {
            updateHerbal_prescription_records({"ids": this.ids, "status": 3}).then(value => {
              if (value.code === 200) {
                this.msgSuccess("发药成功");
                this.getPatientList();
                this.handleDrugList();
              }
            });
          }
        } else {
          this.msgInfo("请选择处方！");
        }
      },
      /**退药*/
      handleWithdrawal() {

      }
    }
  }

</script>
